<template>
  <!-- <div>form sheet</div>
  <div>{{ sheet }}</div> -->

  <!--  -->

  <span>
    <a-form ref="editRef" autocomplete="off" :model="model2">
      <template v-for="node in sheet || {}" :key="node.nodename">
        <TagNode
          :model="model2"
          :node="node"
          :form-info="formInfo"
          @change="onChange"
        />
      </template>
    </a-form>
  </span>
</template>
<script setup>
import { ref, computed } from 'vue'
import TagNode from '@/odoojs-antdv/ONode/TagNode.vue'

const props = defineProps(['model', 'sheet', 'formInfo'])
const emit = defineEmits(['change'])

const editRef = ref()

function validate() {
  return editRef.value.validate()
}

function resetFields() {
  return editRef.value.resetFields()
}

defineExpose({ validate, resetFields })

const model2 = computed({
  get() {
    return props.model || {}
  },

  // eslint-disable-next-line no-unused-vars
  set(val) {
    // state.mVal = {...}
  }
})

function onChange(fname, value) {
  // console.log('onChange  ', fname, value)
  emit('change', fname, value)
}
</script>

<style scoped></style>
